<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="霞客约车网，霞客，约车,互联网巴士，巴士,xiake,xiakeyueche, bus，包车，用车，租车，大巴，直通车，车票，自助游，跟团游,接送机">
<meta name="description" content="霞客约车网是一款互联网+交通出行平台，联合专业客运企业提供各类包车、旅行车票及个性化的定制包车产品，产品包括日租包车、旅游包车、接送机/火车、自助游车票、跟团游巴士、机场直通车、定制包车等，致力于为用户提供更安全、更便捷、更集约的旅行用车服务。">
<script src="${ctxStatic }/index/components/jquery/dist/jquery.min.js"></script>
<title>Insert title here</title>
<script>
        $(document).ready(function(){
            $(".kuashi").click(function(){
                $(".shhi").hide();
            });
            $(".shinei").click(function(){
                $(".shhi").show();
            });
        });
    </script>
</head>
<body>
<div class="slid">
<div class="slider"style="z-index: 0">
    <ul class="slider-main">
        <li class="slider-panel">
            <a href="#" target="_blank"><img alt=""  src="${ctxStatic }/index/images/banner/1.png"></a>
        </li>
        <li class="slider-panel">
            <a href="#" target="_blank"><img alt=""   src="${ctxStatic }/index/images/banner/2.png"></a>
        </li>
        <li class="slider-panel">
            <a href="#" target="_blank"><img alt=""  src="${ctxStatic }/index/images/banner/3.png"></a>
        </li>
        <li class="slider-panel">
            <a href="#" target="_blank"><img alt=""   src="${ctxStatic }/index/images/banner/1.png"></a>
        </li>
    </ul>
    <div class="slider-extra">
        <ul class="slider-nav">
            <li class="slider-item"></li>
            <li class="slider-item"></li>
            <li class="slider-item"></li>
            <li class="slider-item"></li>
        </ul>
        <div class="slider-page">
            <a class="slider-pre" >&lt;</a>
            <a class="slider-next" >&gt;</a>
        </div>
    </div>
</div>
</div>
    <div class="provide">
        <h3>我们为您提供</h3>
        <h5>6种用车场景，让用车更加个性化</h5>
        <div class="tourism">
            <img class="tourism-1" src="${ctxStatic }/index/images/home-1.png">
            <h4 class="tourism-2">旅游包车</h4>
            <h4 class="tourism-3">千条特色路线一口价</h4>
        </div>
        <div class="per">
            <img class="per-1" src="${ctxStatic }/index/images/home-2.png">
            <h4 class="per-2">按天包车</h4>
            <h4 class="per-3">任意天数自由搭配</h4>
        </div>
        <div class="transfer">
            <img class="transfer-1" src="${ctxStatic }/index/images/home-3.png">
            <h4 class="transfer-2">接送机</h4>
            <h4 class="transfer-3">免费等候90分钟</h4>
        </div>
        <div class="train">
            <img class="train-1" src="${ctxStatic }/index/images/home-4.png">
            <h4 class="train-2">接送火车</h4>
            <h4 class="train-3">免费等候20分钟</h4>
        </div>
        <div class="cust">
            <img class="cust-1" src="${ctxStatic }/index/images/home-5.png">
            <h4 class="cust-2">定制包车</h4>
            <h4 class="cust-3">量身打造一口价</h4>
        </div>

    </div>

    <div id="item5" class="sr_w sr_space ">
        <div class="sr_center">
            <h2 class="sr_color_3">多款车型供应，方便</h2>
            <p class="sr_color_9">公司团建、聚会出游多款车型任您选择</p>
        </div>
        <div class="sr_accordion sr_mb_20">
            <ul>
                <li class="active" >
                    <img src="${ctxStatic }/index/images/car_1.png" alt="中港过境车 7座">
                    <span class="info">经济型</span>
                    <div class="mask"></div>
                </li>
                <li >
                    <img src="${ctxStatic }/index/images/car_2.png" alt="商务7座">
                    <span class="info">舒适型</span>
                    <div class="mask"></div>
                </li>
                <li>
                    <img src="${ctxStatic }/index/images/car_3.png" alt="商务9座">
                    <span class="info">豪华型</span>
                    <div class="mask"></div>
                </li>
                <li>
                    <img src="${ctxStatic }/index/images/car_4.png" alt="纯电动15座">
                    <span class="info">商务型</span>
                    <div class="mask"></div>
                </li>
                <li>
                    <img src="${ctxStatic }/index/images/car_5.png" alt="中巴22座">
                    <span class="info">别克GL8</span>
                    <div class="mask"></div>
                </li>
            </ul>
        </div>
        <div class="sr_accordion">
            <ul>
                <li>
                    <img src="${ctxStatic }/index/images/car_6.png" alt="大巴35座">
                    <span class="info">19座纯电动中巴</span>
                    <div class="mask"></div>
                </li>
                <li>
                    <img src="${ctxStatic }/index/images/car_7.png" alt="大巴37座">
                    <span class="info">20座中巴</span>
                    <div class="mask"></div>
                </li>
                <li>
                    <img src="${ctxStatic }/index/images/car_8.png" alt="大巴47座">
                    <span class="info">35座大巴</span>
                    <div class="mask"></div>
                </li>
                <li>
                    <img src="${ctxStatic }/index/images/car_9.png" alt="大巴49座">
                    <span class="info">45座大巴</span>
                    <div class="mask"></div>
                </li>
                <li class="active" >
                    <img src="${ctxStatic }/index/images/car_10.png" alt="大巴53座">
                    <span class="info">53座大巴</span>
                    <div class="mask"></div>
                </li>
            </ul>
        </div>
    </div>

<!--<script src="index/car/js/car.js"></script>-->
    <div class="cooper">
        <img class="line" src="${ctxStatic }/index/images/line.jpg">
            <p class="cooper-3">合作共赢</p>
        <img class="line-1" src="${ctxStatic }/index/images/line.jpg">
            <p class="cooper-5">诚邀出租车司机加盟</p>
        <img class="ban" src="${ctxStatic }/index/images/banner-1.jpg">
    </div>

    <div class="guarantee">
        <h3>六大保障</h3>
        <h5>让用车全程无忧</h5>
        <div  id="guar" class="guarantee-1">
            <img src="${ctxStatic }/index/images/home-6.png">
            <div class="guar">
            <p class="guar-1">资金保障</p>
            <p class="guar-2">平台代理资金</p>
            <p class="guar-2">用车满意后再结算</p>
            </div>
        </div>

        <div class="guarantee-1">
            <img src="${ctxStatic }/index/images/home-7.png">
            <div class="guar">
                <p class="guar-1">资金保障</p>
                <p class="guar-2">平台代理资金</p>
                <p class="guar-2">用车满意后再结算</p>
            </div>
        </div>
        <div class="guarantee-1">
            <img src="${ctxStatic }/index/images/home-8.png">
            <div class="guar">
                <p class="guar-1">资金保障</p>
                <p class="guar-2">平台代理资金</p>
                <p class="guar-2">用车满意后再结算</p>
            </div>
        </div><br>
        <div  id="magor" class="guarantee-1">
            <img src="${ctxStatic }/index/images/home-9.png">
            <div class="guar">
                <p class="guar-1">资金保障</p>
                <p class="guar-2">平台代理资金</p>
                <p class="guar-2">用车满意后再结算</p>
            </div>
        </div>
        <div class="guarantee-1">
            <img src="${ctxStatic }/index/images/home-10.png">
            <div class="guar">
                <p class="guar-1">资金保障</p>
                <p class="guar-2">平台代理资金</p>
                <p class="guar-2">用车满意后再结算</p>
            </div>
        </div>
        <div class="guarantee-1">
            <img src="${ctxStatic }/index/images/home-11.png">
            <div class="guar">
                <p class="guar-1">资金保障</p>
                <p class="guar-2">平台代理资金</p>
                <p class="guar-2">用车满意后再结算</p>
            </div>
        </div>
    </div>
</body>
</html>